import React from 'react'
import ECharts from 'echarts'
import 'echarts/map/js/china'

export default class ChinaMap extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      myChart: null
    }
  }
  componentDidMount() {
    const myChart = this.createMap(this.mapNode);
    this.setState({
      myChart
    }, () => {
      this.setMapOption(this.props.chinaMapData)
    })
  }

  componentWillReceiveProps(props) {
    this.setMapOption(props.chinaMapData)
  }

  createMap = element => {
    return ECharts.init(element)
  };

  setMapOption = (data) => {
    const option = {
      tooltip: {
        trigger: 'item',
      },
      visualMap: {
        orient: 'vertical',
        min: 0,
        max: 1000,
        text: ['高', '低'], // 文本，默认为数值文本
        splitNumber: 0,
        color: ['orangered', 'yellow', 'lightskyblue'],
      },
      series: [
        {
          name: '进粉',
          type: 'map',
          mapType: 'china',
          mapLocation: {
            x: 'left',
          },
          itemStyle: {
            normal: { label: { show: true, color: '#333' }, borderWidth: 0 },
          },
          data: data
        },
      ],
      animation: false,
    };
    this.state.myChart.setOption(option, true);
  }

  setMapElement = n => {
    this.mapNode = n;
  };

  render() {
    return (
      <div style={{ width: '1000px', height: '800px' }} ref={this.setMapElement} />
    )
  }

}
